<template>
    <!-- 1.整体布局：优先考虑 ele-ui。不要一来就自己写。-->
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="nav">
                <span class="nav-title">产品类型列表</span>
                <!-- tree 组件 -->
                <div class="tree">
                    <Tree @send-tree-data="sendTreeData" />
                </div>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="wrapper">
                <span class="wrapper-title">商品{{ title }}</span>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品类目" prop="goodscategory">
                        <span>{{ ruleForm.goodscategory }}</span>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="goodsname">
                        <el-input v-model="ruleForm.goodsname"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goodsprice">
                        <el-input v-model="ruleForm.goodsprice"></el-input>
                    </el-form-item>
                    <el-form-item label="商品卖点" prop="buypoint">
                        <el-input v-model="ruleForm.buypoint"></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="goodsdiscrip">
                        <Editor @sendWangContent="getWangContent" ref="weditor" />
                    </el-form-item>
                    <el-form-item v-if="this.title != '详情'">
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button @click="goBack">取消</el-button>
                    </el-form-item>
                    <el-form-item v-else>
                        <el-button type="primary" @click="goBack">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import Tree from '@/views/product/list/component/tree.vue'
import Editor from '@/views/product/list/component/editor.vue'
import { addProd, postEditor } from '@/api/request/product/index'
import { mapState } from 'vuex'
import { removeInfo } from '@/utils/storage'

export default {
    name: 'product-page',
    components: {
        Tree,
        Editor
    },
    computed: {
        ...mapState('prodList', ['title', 'rowData'])
    },
    data() {
        return {
            ruleForm: {
                goodscategory: '',
                goodsname: '',
                goodscode: 0,
                goodsprice: '',
                buypoint: '',
                goodsdiscrip: ''
            },
            rules: {
                goodscategory: [
                    { required: true, message: '请选择商品类目', trigger: 'blur' }
                ],
                goodsname: [
                    { required: true, message: '请输入商品名称', trigger: 'change' }
                ],
                goodsprice: [
                    { required: true, message: '请输入商品价格', trigger: 'change' }
                ],
                buypoint: [
                    { required: true, message: '请输入商品卖点', trigger: 'change' }
                ],
                goodsdiscrip: [
                    { required: true, message: '请输入商品描述', trigger: 'change' }
                ],
            }
        };
    },
    created() {
        if (this.title != '添加') {
            this.ruleForm = JSON.parse(JSON.stringify(this.rowData))
            this.$nextTick(()=> {
                this.$refs.weditor.html = this.rowData.goodsdiscrip
            })
        }
    },
    destroyed() {
        // 组件销毁, 清除本地存储的数据
        removeInfo('title')
        removeInfo('rowData')
    },
    methods: {
        getFormData() {
            console.log('ruleForm', this.ruleForm);
        },
        sendTreeData(data) {
            this.ruleForm.goodscategory = data.name
            this.ruleForm.cid = data.cid
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.changeGoodsList()
                } else {
                    this.$message.error('表单未填写完整')
                    return false;
                }
            });
        },
        async changeGoodsList() {
            let res = this.title == '添加' ? await addProd('/addprod', this.ruleForm) : await postEditor('/editor', this.ruleForm)
            if (res.code == 200) {
                this.$router.push('/product/list')
                this.$message.success(res.message)
            }
        },
        goBack() {
            this.$router.push('/product/list')
        },
        resetForm(formName) {
            if (this.title == '编辑') {           // 编辑---重置时，数据回到更进入状态
                this.ruleForm = JSON.parse(JSON.stringify(this.rowData))
                this.$refs.weditor.html = this.rowData.goodsdiscrip
                return
            }
            this.$refs[formName].resetFields();
            this.$refs.weditor.clean()          // 父组件中通过 ref 属性调用子组件中的方法，清除内容

        },
        getWangContent(cont) {
            this.ruleForm.goodsdiscrip = cont
        }
    },
}
</script>
<style scoped lang="less">
.nav {
    background-color: #fff;
    height: 600px;

    .nav-title {
        width: 100%;
        height: 40px;
        padding-left: 5px;
        box-sizing: border-box;
        line-height: 40px;
        color: #fff;
        background-color: #87CEEB;
    }

    .tree {
        padding: 15px;
    }
}

.wrapper {
    background-color: #fff;
    // height: 800px;

    .wrapper-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
        box-sizing: border-box;
        background-color: #C0C0C0;
    }

    .demo-ruleForm {
        padding: 10px;
    }
}
</style>